<template>
  <div id="home">
    <!-- 头部巨幕 -->
    <van-row>
      <van-col span="24" class="screen-label">今日交易金额</van-col>
    </van-row>
    <van-row type="flex" justify="center">
      <van-col span="24" class="transaction-amount">
        <span style="color: #969799; font-size: 16px;">￥</span>{{amount}}
      </van-col>
    </van-row>
    <van-row type="flex" justify="center">
      <van-col span="8">
        <van-cell
          title="当前价格"
          :label="'￥' + price"
          class="bg-white"
          title-class="price-title"
          label-class="price-label"
          center
        >
          <template #icon>
            <van-icon name="balance-o" class="icon" />
          </template>
        </van-cell>
      </van-col>
      <van-col span="8">
        <van-cell
          title="交易量"
          :label="volume"
          class="bg-white"
          title-class="volume-title"
          label-class="volume-label"
          center
        >
          <template #icon>
            <van-icon name="chart-trending-o" class="icon" />
          </template>
        </van-cell>
      </van-col>
    </van-row>

    <!-- 我的资产 -->
    <van-sticky :offset-top="-15" @scroll="onScroll">
      <van-cell
        :class="assets"
        title="我的资产"
        title-class="assets-title"
        center
        clickable
      >
        <template #icon>
          <van-icon name="paid" class="paid-icon" />
        </template>
        <template #default>
          <van-row type="flex" justify="end">
            <van-col span="19" class="balance">{{balance}}</van-col>
            <van-col span="5" class="annotate">GST</van-col>
          </van-row>
          <van-row type="flex" justify="end">
            <van-col span="19" class="wallet-id">{{walletId}}</van-col>
            <van-col span="5" class="annotate">钱包</van-col>
          </van-row>
        </template>
      </van-cell>
    </van-sticky>

    <!-- 新闻列表 -->
    <van-cell-group title="新闻">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 预加载状态 -->
        <van-skeleton
          v-for="item in news"
          :key="item.title"
          :loading="item.loading"
          :row="2"
          avatar-shape="square"
          avatar-size="48px"
          style="padding: 16px"
          avatar
          title
        >
          <!-- 新闻 -->
          <van-cell
            :title="item.title"
            :label="item.content"
            title-class="news-title"
            clickable
          >
            <template #icon>
              <van-image
                class="cover"
                width="48"
                height="48"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
                lazy-load
              />
            </template>
          </van-cell>
        </van-skeleton>
      </van-list>
    </van-cell-group>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Lazyload } from 'vant';

  Vue.use(Lazyload);

  export default {
    name: "Home",
    data() {
      return {
        amount: '0',        // 今日交易额
        price: '0',         // 单价
        volume: '0',        // 交易量
        balance: '0',       // 余额
        walletId: '******', // 钱包地址
        news: [
          {title: '关于 Vant', content: 'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。', loading: false},
          {title: '美国总统特朗普被爆中国卧底...', content: 'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。', loading: false},
          {title: '野兽先辈成立说...', content: 'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。', loading: false},
        ],
        assets: 'assets',
        loading: false,
        finished: false,
        loadingMessage: true,
      };
    },
    methods: {
      onLoad() {
        var cache = [];

        for (let i = 0; i < 5; i++) {
          cache[i] = {loading: true};
          this.news.push(cache[i]);
        }

        setTimeout(() => {
          for (let i = 0; i < 5; i++) {
            cache[i].title = '野兽先辈成立说...';
            cache[i].content = 'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。';
            cache[i].loading = false;
          }

          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.news.length >= 5) {
            this.finished = true;
          }
        }, 1000);
      },
      onScroll(arg) {
        if (arg.isFixed) {
          this.assets = 'assets active';
        } else {
          this.assets = 'assets';
        }
      }
    },
    mounted: function () {
      this.amount = '6,297,502.12';
      this.price = '13.3';
      this.volume = '20,213,123';
      this.balance = '0.55';
      this.walletId = '**********4ada';
    },
  }
</script>

<style scoped>
  /* 巨幕 */
  .screen-label {
    font-size: 14px;
    color: #969799;
    padding: 16px 16px 8px;
  }
  .transaction-amount {
    font-size: 30px;
    color: #1989fa;
    text-align: center;
    padding: 20px 40px;
    position: relative;
  }
  .bg-white {
    background-color: #f7f8fa;
  }
  .price-title,.volume-title {
    color: #969799;
    line-height: 12px;
  }
  .price-label,.volume-label {
    line-height: 12px;
  }

  /* 我的资产 */
  .assets {
    margin: 15px;
    width: unset;
  }
  .assets.active {
    margin: 15px 0;
    width: unset;
    background-color: #f7f8fa;
  }
  .assets-title {
    color: #545c80;
    font-size: 20px;
  }
  .paid-icon {
    font-size: 30px;
    margin-right: 10px;
    color: #FFF;
    background-color: #B6BCE0;
    /*background-color: #545c80;*/
    border-radius: 50%;
    padding: 5px;
  }
  .balance {
    color: #545c80;
    font-size: 24px;
  }
  .wallet-id {
    color: #969799;
    font-size: 12px;
  }
  .annotate {
    font-size: 12px;
  }

  /* 新闻 */
  .cover {
    margin-right: 10px;
  }
  .news-title {
    font-size: 18px;
  }
  .icon {
    font-size: 30px;
    color: #1989fa;
  }
</style>
